<template>
  <el-container class="container">
    <el-backtop :bottom="100" :right="60"/>
    <el-card class="card">
      <div class="search-div">
        <div class="flex-grow" style="flex-grow: 1;"/>
        <el-select v-model="address" placeholder="全国"
                   style="min-height: 50px; width: 150px; line-height: 30px;display: grid; font-size: 20px">
          <el-option v-for="item in allAddress" :key="item" :value="item" :label="item"></el-option>
        </el-select>
        <el-input v-model="input"
                  style="width: 600px; height: 50px; font-size: 18px;"
                  placeholder="搜索职位、公司"
                  size="large"/>
        <el-button type="primary"
                   style="height: 50px; font-size: 18px; text-align: center"
                   :icon="Search"
                   size="large"
                   @click="searchMassage(input)">搜索
        </el-button>
        <div class="flex-grow" style="flex-grow: 1;"/>
      </div>
      <div class="params-div">
        <div class="flex-grow" style="flex-grow: 1;"/>
        <div style="display: flex">
          <!--          <el-cascader v-model="jobType" :options="allJobType" placeholder="职位类型"-->
          <!--                       style="width: 200px;margin-right: 20px"/>-->
          <el-cascader
              v-model="jobType"
              :options="options"
              :multiple="false"
              :props="{ value: 'skillName', label: 'skillName', children: 'skills' }"
              :show-all-levels="false"
              placeholder="职位类型"
              style="width: 200px;margin-right: 20px"
          ></el-cascader>
          <el-select v-model="jobExp" placeholder="工作经验" style="width: 200px;margin-right: 20px">
            <el-option v-for="item in allJobExp" :key="item" :value="item" :label="item"></el-option>
          </el-select>
          <el-select v-model="education" placeholder="学历要求" style="width: 200px;margin-right: 20px">
            <el-option v-for="item in allEducation" :key="item" :value="item" :label="item"></el-option>
          </el-select>
          <el-button style="color: #87909f" text @click="clearAll">清空筛选条件</el-button>
        </div>
        <div class="flex-grow" style="flex-grow: 1;"/>
      </div>
    </el-card>
    <div v-for="item in allJobList" key="item.id" class="job-item"
         @click="allJobClick(item.id, item.jobName)">
      <div class="flex-grow" style="flex-grow: 2;"/>
      <!-- 职位卡片 -->
      <el-card style="border-radius: 10px; margin-right: 5px;width: 500px">
        <!-- 职业名称-->
        <el-text size="large" style="font-size: 18px;font-weight: bold">{{ item.jobName }}
        </el-text>
        <!-- 标签 -->
        <div style="display: flex; padding: 10px 5px 10px 5px">
          <!-- 薪资 -->
          <el-text style="font-size: 15px; font-weight: bold; color: #f26d49;">{{ item.salary }}</el-text>
          <el-tag style="margin-left: 10px">{{ item.educationRequire }}</el-tag>
          <el-tag style="margin-left: 10px;margin-right: 5px">{{ item.ageRequire }}</el-tag>
          <el-tag v-for="i in item.skillRequire" key="i" style="margin-left: 5px">
            {{ i }}
          </el-tag>
        </div>
        <!-- 底部信息 -->
        <div style="display:flex; margin:0 20px">
          <el-text>
            {{ item.hrName }}
            <el-divider direction="vertical"/>
            {{ item.status }}
          </el-text>
        </div>
      </el-card>
      <el-card style="border-radius: 10px; width: 500px">
        <div style="display: flex">
          <img v-lazy="item.companyImage" height="50px" width="50px"/>
          <div style="display: flex;flex-direction: column; margin-left: 20px">
            <div>
              <el-text size="large" style="font-size: 18px">{{ item.companyName }}</el-text>
            </div>
            <div>
              <el-tag style=" margin: 10px 0" type="info">{{ item.companyType }}</el-tag>
            </div>
          </div>
        </div>
        <!-- 底部信息 -->
        <div style="display:flex; margin:0 20px">
          <el-text>
            {{ item.companyBoss }}
            <el-divider direction="vertical"/>
            {{ item.companyAddress }}
          </el-text>
        </div>
      </el-card>
      <div class="flex-grow" style="flex-grow: 2;"/>
    </div>
    <div style="text-align: center; padding: 20px 0">
      <el-button v-show="!isLast" style="color: dodgerblue" text @click="addMore">加载更多</el-button>
      <el-text v-show="isLast">没有更多了~</el-text>
    </div>
  </el-container>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue"
import {onMounted, ref, toRefs, watch} from "vue";
import axios from "axios";
import {useRoute, useRouter} from 'vue-router';
import {seekerApi} from "../../api/app";

const router = useRouter()
const route = useRoute()
const {query} = toRefs(route)

const size = ref(25)
const page = ref(1)
const total = ref(0)
const isLast = ref(false)

const input = ref("")
const address = ref("")
const jobType = ref("")
const jobExp = ref("")
const education = ref("")
const allAddress = ["全国", "安徽", "澳门", "北京", "重庆",
  "福建", "甘肃", "广东", "广西", "贵州", "海南",
  "河北", "河南", "黑龙江", "湖北", "湖南", "吉林",
  "江苏", "江西", "辽宁", "内蒙古", "宁夏", "青海",
  "山东", "山西", "陕西", "上海", "四川", "台湾",
  "天津", "西藏", "香港", "新疆", "云南", "浙江"]
const allJobExp = ["不限", "在校生", "应届生", "3年以下", "3-5年", "5-10年", "10年以上"]
const allEducation = ["不限", "高中", "本科", "硕士", "博士"]
const allJobType = ref()
const options = ref()
const allJobList =
    ref()

// 在组件挂载后执行回调函数
onMounted(() => {
  getData()
  getJobType()
})

const getJobType = () => {
  seekerApi.getJobType()
      .then(reponse => {
        console.log(reponse)
        allJobType.value = reponse.data
        console.log(allJobType)
        options.value = handleOptions(allJobType.value)
        console.log(options.value)
      })
      .catch(error => {
        console.log(error)
      })
}

const handleOptions = (data) => {
  const arr = []
  arr.push({id: '', skillName: '不限'})
  if (data !== '' && data !== null)
    data.map((item, index) => {
      console.log(item)
      const obj = {}
      obj.id = item.jobTypeId
      obj.skillName = item.jobTypeName
      obj.skills = item.skills
      arr.push(obj)
    })
  // for (let i in allJobType.value){
  //   console.log(i)
  //   const arr1 = {}
  //   const dan = {}
  //   arr1.skills = []
  //   for(let j in i){
  //     dan.id = j.id
  //     dan.name = j.skillName
  //     arr1.skills.push(dan)
  //   }
  //   arr1.id = i.jobTypeId
  //   arr1.name = i.jobTypeName
  //   arr.push(arr1)
  // }
  return arr
}
const getData = () => {
  if (query.value != null) {
    if (query.value.key != null) input.value = query.value.key
    if (query.value.add != null) address.value = query.value.add
    if (query.value.type != null) jobType.value = query.value.type
    if (query.value.exp != null) jobExp.value = query.value.exp
    if (query.value.edu != null) education.value = query.value.edu
    console.log(input.value)
  }
  let type = ''
  if (jobType.value !== '') {
    type = jobType.value[jobType.value.length - 1]
  }
  // console.log(jobType.value)
  console.log("职位类型：", type)
  seekerApi.searchJob(
      {
        size: size.value,
        page: page.value,
        name: input.value,
        oneSkillRequire: type,
        educationRequire: education.value,
        experienceRequire: jobExp.value,
        companyAddress: address.value
      })
      .then(reponse => {
        console.log(input.value, address.value, jobType.value, jobExp.value, education.value)
        console.log(reponse)
        total.value = reponse.data.total
        if (page.value * size.value < total.value) {
          isLast.value = false
        } else {
          isLast.value = true
        }
        allJobList.value = reponse.data
      }).catch(error => {
    console.log(error)
  })
}

const searchMassage = (key) => {
  console.log("搜索刷新")
  router.push({
    name: "SearchMain",
    query: {key: key, add: address.value, type: jobType.value, exp: jobExp.value, edu: education.value}
  })
}


//点击查看推荐职业详细信息
const allJobClick = (id, jobName) => {
  // console.log("详情职业 id：" + id + " 名称：" + jobName)
  // router.push({name:"seekerJobMessage", params:{id:id}})

  // const newWindow = window.open("/seekerMain/seekerJobMessage/" + id, '_blank')
  const newWindow = window.open("/seekerMain/seekerJobMessage/" + id, '_blank')
  // 等待页面加载完成后设置标题
  newWindow.onload = function () {
    newWindow.document.title = jobName;
  };
}

const addMore = () => {
  page.value = page.value + 1
  seekerApi.searchJob(
      {
        size: size.value,
        page: page.value,
        jobTypeId: null,
        name: input.value,
        oneSkillRequire: jobType.value,
        educationRequire: education.value,
        experienceRequire: jobExp.value,
        companyAddress: address.value
      })
      .then(reponse => {
        console.log(reponse)
        total.value = reponse.data.total
        if (page.value * size.value < total.value) {
          isLast.value = false
        } else {
          isLast.value = true
        }
        let newJob = reponse.data
        allJobList.value = allJobList.value.concat(newJob);//把新的数组里的内容 添加到数组后面
        // console.log(allJobList.value)
      }).catch(error => {
    console.log(error)
  })
}

const clearAll = () => {
  router.push({
    name: "SearchMain",
    query: {key: '', add: '', type: '', exp: '', edu: ''}
  })
}

const loadData = () => {
  // 这里是加载数据的逻辑
  getData()
  getJobType()
}

// 在组件的 created 钩子中监听 $route 对象的变化
watch(query, () => {
  loadData(); // 监听路由变化，重新加载数据
}, {immediate: true});

</script>

<style scoped>
.container {
  margin: 20px 160px;
  display: flex;
  flex-direction: column;
  min-height: 760px;
}

.card {
  width: 100%;
  border-radius: 10px;
}

.card .search-div {
  display: flex;
}

.card .search-div .input-item {
  max-width: 800px;
  font-size: 18px;
  height: 35px;
}

.params-div {
  display: flex;
  margin-top: 30px;
}

.job-item {
  display: flex;
  margin-top: 20px;
}
</style>
